<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" type="text/css"
	href="<c:url value="/static/jquery-easyui/themes/metro/easyui.css"/>">
<link rel="stylesheet" type="text/css"
	href="<c:url value="/static/jquery-easyui/themes/icon.css"/>">
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/jquery-1.6.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/jquery.easyui.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/plugins/jquery.panel.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/plugins/jquery.datagrid.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/plugins/jquery.messager.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/ext-for-framework.js.jsp"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/locale/easyui-lang-zh_CN.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/js/common.js"/>"></script>
<style type="text/css">
#drag {
	width: 400px;
	height: 300px;
	cursor: move;
	position: absolute;
	top: 100px;
	left: 100px;
	border: solid 1px #ccc;
}

h2 {
	color: #fff;
	background: none repeat scroll 0 0 rgba(16, 90, 31, 0.7);
	color: #FFFFFF;
	height: 40px;
	line-height: 40px;
	margin: 0;
}
</style>


<script type="text/javascript">
	$(function() {
		/*--------------拖曳效果----------------
		 *原理：标记拖曳状态dragging ,坐标位置iX, iY
		 *         mousedown:fn(){dragging = true, 记录起始坐标位置，设置鼠标捕获}
		 *         mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置，绝对定位的元素获得差值}
		 *         mouseup:fn(){dragging = false, 释放鼠标捕获，防止冒泡}
		 */
		var dragging = false;
		var iX, iY;
		$("#drag").mousedown(function(e) {
			dragging = true;
			iX = e.clientX - this.offsetLeft;
			iY = e.clientY - this.offsetTop;
			this.setCapture && this.setCapture();
			return false;
		});
		document.onmousemove = function(e) {
			if (dragging) {
				var e = e || window.event;
				var oX = e.clientX - iX;
				var oY = e.clientY - iY;
				$("#drag").css({
					"left" : oX + "px",
					"top" : oY + "px"
				});
				return false;
			}
		};
		$(document).mouseup(function(e) {
			dragging = false;
			$("#drag")[0].releaseCapture();
			e.cancelBubble = true;
		})

	})
</script>
</head>

<body>
	<div id="drag">
		<h2>蔬菜</h2>
		<table>
			<tr>
				<td>区域位置设定</td>
			</tr>
		</table>
	</div>
</body>
</html>